<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>ImageDatas get & put</title> 
	<style>
		canvas{ position:absolute;}
		p{ position:absolute; bottom:0px; }
	</style>
	<script src="../../lib/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		$( function(){
			
			var img2 = new Image();
			
			img2.onload = function(){
				
				var img = new Image();
				img.onload = function(){
				
				
					var w = h = 50;
					n = 100; //100			
					var inter = 20;
					t = 48;
					
					var ct = $("#ct");
					var ctx = $("<canvas>").attr({
						width: t * w,
						height: t * h
					}).css("zIndex", 1).appendTo(ct)[0].getContext("2d");
					
					ctx.drawImage(img, 0, 0, img.width, img.height);
					var data = ctx.getImageData(0, 0, t, t);
					
					ctx.drawImage(img2, 0, 0, w * t, h * t);
					var whole = ctx.getImageData(0, 0,w*  t, h * t);
					
					setInterval(function(){
					
						//ctx.putImageData(whole,0,0);
						
						for (var i = 0; i < n; i++) {
							var x = (i % w) * t, y = parseInt(i / w) * t;
							
							ctx.putImageData(data, x, y, t, t);
						}
						
					}, inter);
					
				}
				img.src = "footman.png";
			}
			img2.src = "large.png";
		} );
		
			
	</script> 
</head> 
<body id="canvasdemo"> 
	<div id="ct">
		
	</div>
	<p>
		n=100, w=h=48, i = 20, CPU = 28% <br/>
	</p>	
</body> 
<script></script>
</html>